<template>
	<view>
		<!-- 用户 -->
		<view style="position: relative;">
			<view class="process flex  align-center justify-center" @click="toMission">
				<x-lottie style="width:70rpx;height:70rpx" :option="{
				                path:require('../../../static/json/a.json')
				}" />
				<view style="margin-left: 10rpx;">
					<view style="color:#333333 ; font-size: 28rpx;">共厂家居</view>
					<view style="margin-top: '5rpx';font-size:20rpx;">智能小助手</view>
				</view>
			</view>
			<image src="../../../static/tabbar/indexImg.jpg" mode="aspectFit"
				style="width: 100vw;height: 502rpx;z-index: -1;"></image>
			<view
				style="margin-top:-40rpx;background: #FFFFFF;height: 360rpx;padding:0 30rpx;border-radius: 40rpx 40rpx 0rpx 0rpx;">
				<view class="flex align-center" style="padding-top:70rpx;">
					<image src="../../../static/tabbar/8126.png" mode="aspectFit" style="width: 64rpx;height: 64rpx;">
					</image>
					<view style="color: #1E1E1E;font-size: 44rpx;font-weight: bold;">超级工厂</view>
				</view>
				<image src="@/static/tabbar/2@2x.png" mode="aspectFit"
					style="width: 690rpx;height: 140rpx;margin:20rpx 0;" @tap="gologin"></image>
			</view>
			<!-- 城市、类型、风格 -->
			<view class="city">
				<view class="titleIndex">
					默认所在城市
				</view>
				<view class="flex align-center sess" style="background-color: #F8FAFB;">
					<input style="font-size:35rpx;color: #BDC4CE;height: 100%;width: 100%;line-height: 112rpx;"
						v-model="city" placeholder="重庆" disabled type="number" name="phone" @click="selected=true"
						@blur="selected=false"></input>
					<!-- 请输入您的手机号/邮箱/账号 -->
				</view>
				<view class="titleIndex">
					装修面积
				</view>
				<view class="flex align-center" :class=" selected==true ? 'selected' : 'sess' ">
					<input style="font-size:35rpx;color: #BDC4CE;height: 100%;line-height: 112rpx;" v-model="area"
						placeholder="请输入您的房屋面积" type="number" name="phone" @click="selected=true"
						@blur="selected=false"></input>
				</view>
				<view class="flex justify-between">
					<view class="titleIndex">
						您的装修类型
					</view>
					<view class="flex align-center" @click="moreType(1)" v-if="typeList.length > 3">
						更多 <image style="width: 64rpx;height: 64rpx;" src="../../../clientEnd/static/2068.png" mode="">
						</image>
					</view>
				</view>
				<view class="flex" style="margin: 30rpx;">
					<view class="flex" v-for="(item,index) in typeList" :key="index" v-if="index<3">
						<view class="type" :class="typeTindex==index ? 'typeStyle' :''"
							@click="typeChild(index,item.id)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="flex justify-between">
					<view class="titleIndex">
						喜欢风格
					</view>
					<view class="flex align-center" @click="moreType(2)" v-if="styleList.length > 3">
						更多 <image style="width: 64rpx;height: 64rpx;" src="../../../clientEnd/static/2068.png" mode="">
						</image>
					</view>
				</view>
				<view class="flex" style="margin: 30rpx;">
					<view class="flex" v-for="(item,index) in styleList" :key="index" v-if="index<3">
						<!-- <view v-if="categoryName != ''" class="type" :class="styleTindex==index ? 'typeStyle' :''"
							@click="styleChild(index,item.id)">
							{{categoryName}}
						</view> -->
						<view class="type" :class="styleTindex==index ? 'typeStyle' :''"
							@click="styleChild(index,item.id)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view v-if="statusCode != 1" class="seek" @click.stop="seek(1)">
					寻找专业设计师1对1服务
				</view>
				<view v-if="statusCode == 1" class="seek" @click="seekIndex()">
					寻找专业设计师1对1服务
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bus from '@/components/bus.js'
	export default {
		data() {
			return {
				type: '',
				// 用户首页
				selected: true,
				city: '',
				// 装修类型
				typeList: [],
				typeTindex: 0,
				// 喜欢风格
				styleList: [],
				styleTindex: 0,
				// 1v1
				categoryId: '',
				typeId: '',
				typeName: '',
				area: '',
				status: 0,
				statusCode: ''
			}
		},
		onReady() {
			this.seek()
		},
		// 触底触发
		onReachBottom() {},
		// 下拉刷新
		onPullDownRefresh: function() {
			setTimeout(() => {
				this.material()
				this.seek()
				wx.stopPullDownRefresh()
			}, 100)
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
			this.material()
		},
		onUnload() {
			uni.$off('categoryId')
			uni.$off('typeId')
		},
		mounted() {
			this.seek()
		},
		created() {
			this.seek()
		},
		onShow() {
			this.seek()
			uni.$on('categoryId', res => {
				this.categoryId = res.categoryData.categoryId
				let that = this
				that.$nextTick(function() {
					this.styleList[0].name = res.categoryData.categoryName
					this.styleList[0].id = res.categoryData.categoryId
					this.styleTindex = 0
				});
				// console.log('呼呼呼呼呼1', res.categoryData.categoryName);
			})
			uni.$on('typeId', res => {
				this.typeId = res.typeData.typeId
				let that = this
				that.$nextTick(function() {
					this.typeList[0].name = res.typeData.typeName
					this.typeList[0].id = res.typeData.typeId
					this.typeTindex = 0
				});
				// console.log('呼呼呼呼呼2', res.typeData.typeName);
			})
		},
		methods: {
			// 用户首页
			// 找设计1v1服务
			seek(status) {
				if (status != undefined) {
					this.status = status
				} else {
					this.status = 0
				}
				let data = {
					area: this.area,
					categoryId: this.categoryId,
					typeId: this.typeId,
					status: this.status
				}
				this.$api.seekArchitect(data).then((res) => {
					this.statusCode = res.data.result.status
					console.log('收拾收拾设计师', res)
					console.log('设计师', this.statusCode)
					this.styleTindex = 0
					this.typeTindex = 0
					this.area = ''
					if (res.statusCode == 200 && status == 1) {
						let index = 1
						if (res.statusCode == 200) {
							this.$tools.goPage('/clientEnd/page/design/searchForDesign?index=' + index)
						}
					}
					uni.stopPullDownRefresh();
				})
			},
			seekIndex() {
				this.$tools.goPage('/clientEnd/page/design/searchForDesign?styleTindex=' + this.styleTindex)
				this.styleTindex = 0
				this.typeTindex = 0
				this.area = ''
			},
			// 装修类型、喜欢风格
			material() {
				this.$api.plteList().then((res) => {
					this.typeList = res.data.result.decorationTypeList;
					this.typeId = this.typeList[0].id;
					this.styleList = res.data.result.categoryList;
					this.categoryId = this.styleList[0].id;
					uni.stopPullDownRefresh();
				})
			},
			// 装修类型
			typeChild(e, id) {
				this.typeTindex = e
				this.typeId = id
				// console.log('装修类型', id)
				if (id == 1) id = ''
			},
			// 喜欢风格
			styleChild(e, id) {
				this.styleTindex = e
				this.categoryId = id
				console.log('喜欢风格', id)
				if (id == 1) id = ''
			},
			// 更多
			moreType(index) {
				this.$tools.goPageNoAuth('/pages/index/seek?index=' + index)
			},
			toMission() {
				this.$tools.goPageNoAuth('/pages/information/gpt')
			},
			gologin() {
				this.$tools.goPage("/clientEnd/page/factor/liveDetail")
			},
			// //跳转到消息列表
			// black() {
			// 	this.$tools.goPageNoAuth('/pages/information/chatPage')
			// },

		}
	}
</script>

<style scoped>
	/* 用户首页 */
	.seek {
		width: 554rpx;
		height: 108rpx;
		background: #492D22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 36rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 108rpx;
		text-align: center;
		margin: 60rpx auto;
	}

	.type {
		width: 208rpx;
		height: 112rpx;
		background: rgba(0, 136, 255, 0.03);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(73, 45, 34, 0.1);
		font-size: 32rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #1E1E1E;
		line-height: 58rpx;
		text-align: center;
		line-height: 112rpx;
		margin-right: 30rpx;
	}

	.typeStyle {
		background: #492D22;
		color: #fFFFFF;
	}

	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
		padding: 0 15rpx;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
		padding: 0 15rpx;
	}

	.city {
		background: #FFFFFF;
		padding-bottom: 300rpx;
	}

	.titleIndex {
		font-size: 36rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		padding: 0 30rpx;
		color: #1E1E1E;
	}

	.otherfu {
		width: calc(100% /4);
		display: flex;
		margin: 30rpx 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	.load-icon {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto 20rpx auto;
		display: block;
	}

	.navbar {
		width: 594rpx;
		height: 66rpx;
		border-radius: 8rpx;
		margin-left: 30rpx;
	}

	/* GPT */
	.process {
		position: fixed;
		width: 258rpx;
		height: 106rpx;
		background: #c3bfbf;
		border-radius: 63px;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(214, 214, 214, 0.5);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 80rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 180rpx;
		/*  #endif */
	}
</style>
